<template>
  <div
    :class="classes"
    v-click-outside.capture="onClickOutside"
    v-click-outside:mousedown.capture="onClickOutside"
    v-click-outside:touchstart.capture="onClickOutside"
  >
    <div
      ref="reference"
      :class="selectionCls"
      :tabindex="selectTabindex"
      @blur="toggleHeaderFocus"
      @focus="toggleHeaderFocus"
      @click="toggleMenu"
      @keydown.esc="handleKeydown"
      @keydown.enter="handleKeydown"
      @keydown.up.prevent="handleKeydown"
      @keydown.down.prevent="handleKeydown"
      @keydown.tab="handleKeydown"
      @keydown.delete="handleKeydown"
      @mouseenter="hasMouseHoverHead = true"
      @mouseleave="hasMouseHoverHead = false"
    >
      <slot name="input">
        <input type="hidden" :name="name" :value="publicValue" />
        <select-head
          :filterable="filterable"
          :multiple="multiple"
          :values="values"
          :clearable="canBeCleared"
          :prefix="prefix"
          :disabled="disabled"
          :remote="remote"
          :input-element-id="elementId"
          :initial-label="initialLabel"
          :placeholder="placeholder"
          :query-prop="query"
          :max-tag-count="maxTagCount"
          :max-tag-placeholder="maxTagPlaceholder"
          @on-query-change="onQueryChange"
          @on-input-focus="isFocused = true"
          @on-input-blur="isFocused = false"
          @on-clear="clearSingleSelect"
        >
          <slot name="prefix" slot="prefix"></slot>
        </select-head>
      </slot>
    </div>
    <transition name="transition-drop">
      <Drop
        :class="dropdownCls"
        v-show="dropVisible"
        :placement="placement"
        ref="dropdown"
        :data-transfer="transfer"
        :transfer="transfer"
        v-transfer-dom
      >
        <ul v-show="showNotFoundLabel && !$slots.empty" :class="[prefixCls + '-not-found']">
          <li>{{ localeNotFoundText }}</li>
        </ul>
        <!--feature #5327-->
        <ul v-if="showNotFoundLabel && $slots.empty" :class="[prefixCls + '-not-found']" @mousedown.prevent>
          <li><slot name="empty"></slot></li>
        </ul>
        <ul :class="prefixCls + '-dropdown-list'">
          <functional-options
            v-if="!remote || (remote && !loading)"
            :options="selectOptions"
            :slot-update-hook="updateSlotOptions"
            :slot-options="slotOptions"
          ></functional-options>
        </ul>
        <ul v-show="loading" :class="[prefixCls + '-loading']">
          {{
            localeLoadingText
          }}
        </ul>
      </Drop>
    </transition>
  </div>
</template>
<script>
import Select from 'iview/src/components/select/select'
export default {
  extends: Select,
  methods: {
    validateOption ({ children, elm, propsData }) {
      // debugger
      const value = propsData.value
      const label = propsData.label || ''
      const textContent =
        (elm && elm.textContent) ||
        (children || []).reduce((str, node) => {
          const nodeText = node.elm ? node.elm.textContent : node.text
          return `${str} ${nodeText}`
        }, '') ||
        ''
      const stringValues = JSON.stringify([value, label, textContent])
      console.log(textContent)
      const query = this.query.toLowerCase().trim()
      return stringValues.toLowerCase().includes(query)
    }
  }
}
</script>
